<template>
	<view class="incomeList">
		<m-income :pageData="pageData" @goPage="goPage" @clickDetail="clickDetail" :list="list"></m-income>
		<m-popup :show="detail.show" @close="closeDetail">
			<view class="popup-detail">
				<view class="form-text">
					<!-- <view>{{detail.row.review_details}}</view> -->
					<view class="form-text-item flex-start-nowrap" v-for="(item,index) in detail.list" :key="index" v-if="item.value && !item.hidden">
						<view class="form-text-label c999">{{item.label}}</view>
						<view class="form-text-value flex-start-nowrap">
							<u--text :type="item.mode" :color="!item.mode?'#999999':''" :text="item.value"></u--text>
							<u-icon v-if="item.copy"  class="cup" @click="copyUrl(item.value)"  size="16" name="/static/images/setting/copy.png"></u-icon>
						</view>
					</view>
					<template v-if="detail.list2.length"> 
						<view class="" style="padding:0px 0 20px 0;">
							<u-line></u-line >
						</view>
						<view class="form-text-item flex-start-nowrap" v-for="(item,index) in detail.list2" :key="index" v-if="item.value && !item.hidden">
							<view class="form-text-label c999">{{item.label}}</view>
							<view class="form-text-value flex-start-nowrap">
								<u--text :type="item.mode" :color="!item.mode?'#999999':''" :text="item.value"></u--text>
								<u-icon v-if="item.copy"  class="cup" @click="copyUrl(item.value)"  size="16" name="/static/images/setting/copy.png"></u-icon>
							</view>
						</view>
					</template>
					
				</view>
			</view>
		</m-popup>
	</view>
</template>

<script>
	import {
		dateFormat
	} from "@/utils/index.js"
	export default {
		name:'record',
		data() {
			return {
				model:'',
				list:[],
				detail:{
					show:false,
					row:{},
					list:[{
							tag:'title',
							label:'兑换物品：',
							value:'',
						},{
							tag:'status',
							label:'状态：',
							mode:'success',
							value:''
						},{
							tag:'time',
							label:'申请时间：',
							value:'',
						},{
							tag:'order_id',
							label:'订单号：',
							value:'',
							copy:true,
						},{
							tag:'remark',
							label:'申请备注：',
							value:'',
						}
					],
					list2:[]
				},
				pageData:{
					"page": 1,
					"page_size": 10,
					total:0
				},
			};
		},
		activated() {
			this.getPageList()
		},
		mounted() {
			
		},
		methods:{
			clickDetail(item){
				debugger
				this.detail.show = true;
				let arr = []
				let _this = this;
				_this.detail.list2 = []
				arr = item.review_details && item.review_details.split(',')
				if(arr && arr.length){
					arr.map(el => {
						_this.detail.list2.push({
								tag:el.split(':')[0],
								label:el.split(':')[0]+'：',
								value:el.split(':')[1],
						})
					})
				}
				
				if(item.review_details &&  item.review_desc){
					_this.detail.list2.push({
							tag:'提示',
							label:'提示：',
							value:item.review_desc,
					})
				}
				this.detail.list = this.detail.list.map(el => {
					
					if(el.tag){
						el.value = item[el.tag]
					}
					if(el.tag == 'status'){
						el.value = item[el.tag] == 0?'待审核':item[el.tag] == 1?'审核通过':'审核不通过'
						el.mode = item[el.tag] == 0?'warning':item[el.tag] == 1?'success':'danger'
					}
					
					if(item.hasOwnProperty('hidden')){
						if(item.status>0 ){
							item.hidden = false;
						}
						
					}
					return el
				})
				this.detail.row = item
			},
			copyUrl(text){
				uni.setClipboardData({
					data:text,
					success: () =>
						uni.showToast({
							icon:'none',
							title: '复制成功'
						})
				})
			},
			closeDetail(val){
				this.detail.show = false;
			},
			goPage(val){
				this.$emit('setScrollTop')
				this.pageData.page = val
				this.getPageList()
			},
			getPageList(){
				let par = {
					"page": this.pageData.page,
				    "page_size": this.pageData.page_size,
				    "status": '' // 状态，0：审核中 ，1：已通过，2：审核不通过
				}
				let _this =this;
				this.$api.reviewRecords(par).then(res => {
					if(res.code == 200){
						res.data.list.map(item => {
							item.time = dateFormat(item.created_at)
							item.statusKey = 'read_status'
						})
						this.list = res.data.list || [];
						if(this.list.length){
							this.readMsgIncomeExchange()
						}
						this.pageData.total = res.data.count
					}
				})
			},
			readMsgIncomeExchange(){
				let par = {} 
				par.ids = this.list.map(item => { return item.Id})
				par.type = '2'
				this.$api.readMsgIncomeExchange(par)
			},
		}
	}
</script>

<style lang="scss">
	.incomeList{
		padding: 0 25px;
	}
	.form-text{
		padding: 15px;
		&-label{
			width: 120px;
		}
		&-value{
			width: calc(100% - 80px);
			word-break:break-all;
		}
		&-item:not(:last-child){
			padding-bottom: 20px;
		}
	}
</style>
